const navbar = (
    <nav>
        <h1>Bob's Bistro</h1>
        <ul>
            <li>Pricing</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)
ReactDOM.render(navbar, document.getElementById("root"))
Copy

const name = "suji"
const age = 21
function component(){
    return(
        <p>Greeting {name}!</p>
        /* <p>
           Age {if(age>20) "Happy"} // this is not allowed
           </p>
        */
    );
}
Copy

<>
// within this we can write multiple html tags
</>
Copy

• when creating components note, it should start with capital letters

• which means it describes what the program to do/achieve rather than specifying how it should run step-by-step

• telling the program what it should do by specifying how it should run step-by-step

function MyComponent(props){
    return(
        <p>Hello, {props.name}!
    );
}
ReactDOM.createRoot(document.getElementById('root')).render(
    <div>
        <MyComponent name="Suji" />
    </div>
)
Copy

• without using props, we can pass values to the components like this

• Prop Drilling involves passing data from a parent component down to deeply nested child components through props.
• It leads to components to pass it down to their children even if they do not need the data themselves.
• Its common in React managing state without context API or Redux.
• This can cause problems in complexity, reusability and readability
• solution : #component-composition

#component-composition

• Its of building UI by combining small, reusable components using children prop
• Its highly reusable and flexible
• Its a fix of prop drilling problem

// MyComponent.jsx
function MyComponent({name, job, email, color, fontSize}){
    return(
        <ul>
          <li
            style={{
                color,
                fontSize
            }}
          >{name}</li>
          <li>Job</li>
          <li>{job}</li>
          <li>Email</li>
          <li>{email}</li>
          <br />
        </ul>
    );
 }
 export default MyComponent;

//main.jsx
import MyComponent from './MyComponent.jsx'
const data = [
  {
    id:"abc123",
    name:"suji",
    job : "Software Engineer",
    email : "abc@gmail.com",
    color : "blue",
    fontSize : "20px",
  },
  {
    id:"efg456",
    name:"James",
    job : "Mech Engineer",
    email : "abcdef@gmail.com",
    color : "red",
    fontSize : "30px",
  },
  {
    id:"hij789",
    name:"Jonathan",
    job : "Electrical Engineer",
    email : "abcdefgh@gmail.com",
    color : "green",
    fontSize : "40px",
  },
]
  
ReactDOM.createRoot(document.getElementById('root')).render(
  <>
    {data.map((ele) => (
      <>
      <MyComponent
        name = {ele.name}
        job = {ele.job}
        email = {ele.email}
        color = {ele.color}
        fontSize = {ele.fontSize}
      />
      <br />
      </>
    ))}
  </>
)
Copy

• use keys in order to give uniqueness to the components

function App(){
	function click(){
		window.alert('Completion Success');
	}

	return(
		<button onClick={click}> Click me! </button>
		// if we don't call them directly it will only call when we click the button
		
		// <button onClick={click()}> Click me! </button>
		// if we call function directly then react will call the function even without clicking the button on everytime we open the page
		// bcz, react renders them first
	)
}
Copy

function App(){
	function click(type){
		if(type === 'success'){
			window.alert('Completion Success');
		}
		else{
			window.alert('Completion Dead');
		}
	}

	return(
		<button onClick={() => click('success')}> Click me! </button>
		// if we don't want to call them directly and also pass values then we use 'another function' within that function we put our 'click func' - like 'callback func'
		// This will only call when we click the button
		
		// <button onClick={click('success')}> Click me! </button>
		// if we want to pass values throught that func we need to call function directly then react will call the function even without clicking the button on everytime we open the page
		// bcz, react renders them first
	)
}
Copy

• State is a feature that allows a component to keep track of and manage its own data.
• It is created within the component and its mutable
• used to reflect changes on the component's UI

• UseState/State has an asynchronous update behavior

• this for updating state values immediately before rendering process to occur

• Data flows in one direction, from the component's state to the UI

import React, { useState } from 'react';
function MyComponent() {
  const [message, setMessage] = useState('Hello, React!');
  return (
  <p>{message}</p>;
  );
}

Copy

• Data flows both from the component's state to the UI and from the UI back to the state.
• Here, "inputValue" state, allowing changes in the input to update the state, and vice versa.

import React, { useState } from 'react';
function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
};
  return (
    <div>
      <input
      type="text"
      value={inputValue}
      // this allows 2-way binding, state to UI
      onChange={handleInputChange}
      // this allows 2-way binding, UI to state
      />
      <p>{inputValue}</p>
      // this is 1-way binding, state to UI
    </div>
  );
}
Copy

• create data for option in seperate file.js
• send the data to the component

• event.preventDefault() - this is used to block reloading the page/form

• 'name' used to make the two radio buttons to one group, so we can only select one radio button
• to select radiobutton by clicking the label, done by 'htmlFor' & 'id' making them to have same name
• to change the iceCream value in radiobutton, its little diff from others, we need to give accurate value (value='value') rather than seting it to the useState value

import { useState } from 'react'

function App() {
  const [iceCream, seticeCream] = useState("Select")
   return (
    <>
      <form onSubmit={handleSubmit}>
		{/* radiobutton */}
        <label>Select fav ice-cream: </label>
        {/* 'name' used to make the two radio buttons to one group, so we can only select one radio button */}
        {/* to select radiobutton by clicking the label, done by 'htmlFor' & 'id' making them to have same name */}
        {/* to change the iceCream value in radiobutton, its little diff from others, we need to give accurate value (value='value') rather than seting the useState value */}
        <input id='chocolate' type="radio" name='iceCream' value='chocolate'
        onChange={(event)=>{seticeCream(event.target.value)}}/>
        <label htmlFor="chocolate">Chocolate</label>

        <input id='vanilla' type="radio" name='iceCream' value='vanilla' onChange={(event)=>{seticeCream(event.target.value)}}/>
        <label htmlFor="vanilla">Vanilla</label>
        
        <p>Your fav IceCream is : {iceCream}</p>
      </form>
    </>

  )

}
Copy

// App.jsx

import { useState } from 'react'
import './App.css'
import Promotion from './Promotion'
import Total from './Total'

function App() {
{/* lifting state */}
  const [Cnum, setCnum] = useState(0)
  const amount = 100 - Cnum
  
  function handleCouponSubmit(couponValue){
    setCnum(couponValue)
  }

  return (
    <>
    {/* lifting state */}
      <h2>This for lifting state example</h2>
      <Promotion handleCouponSubmit={handleCouponSubmit}/>
      <Total amount={amount}/>
    </>

  )

}
export default App


// Promotion.jsx

import React, { useState } from 'react'

const Promotion = ({handleCouponSubmit}) => {
  const [couponValue, setcouponValue] = useState(0)
  return (
    <div>
        <form onSubmit={(event)=>{
            event.preventDefault()
            handleCouponSubmit(couponValue)
        }}>
            <label htmlFor="Cnumber">Enter coupon number :</label>
            <input type="text" name='Cnumber' onChange={(event)=>{
                setcouponValue(event.target.value)
            }}/>
        </form>
    </div>
  )
}
export default Promotion


// Total.jsx

import React, { useState } from 'react'

const Total = ({amount}) => {
  return (
    <div>
    <h3>Total amount is : {amount}</h3>
    </div>
  )
}
export default Total
Copy

The useEffect hook in React is used to perform side effects in function components. It allows you to perform tasks that cannot be handled during rendering.

• useEffect(callback, [dependency array])

• whenever a component created/mounted - callback func runs
• whenever a component updated/useState changes - callback func runs
• whenever a component deleted/unmounted - return : callback func runs

useEffect(() => {
	// when component created this 'callback runs'
	console.log("component created");

	// when a component deleted this 'return callback runs'
	return () => {
		console.log("component deleted");
	};
});
Copy

• effect : where the effects are written
• cleanup : each effect can return a cleanup func when a component is mounted or re-rendered

• Reduc toolkit is used to implement Redux functionalities for state management

• used when we need to change states faster and frequently

• used for large applications which provides centralized state management (for small apps we can use ContextAPI)

1. npm install @reduxjs/toolkit react-redux
2. create new folder "store" and "store.jsx" file in this folder
3. import "configureStore" in 'store.jsx' as below :

// /store/store.jsx
import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
	reducer: {},
});
Copy

4. wrapping the enitre application with store

   // main.jsx
   import { store } from"./store/store.jsx";
   Copy

ReactDOM.createRoot(document.getElementById("root")).render(



)

5. ==create new folder "reducer" and "counterSlice.jsx" file== in the "store" folder
6. ==import "creatSlice" from reduxToolkit in "counterSlice.jsx"== as below :
   ```javascript
// /store/reducer/counterSlice.jsx
import { createSlice } from '@reduxjs/toolkit'; // function or API from redux toolkit

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
  // reducer functions or actions
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions; // this generates 'action creators' for each case reducer function

export default counterSlice.reducer; // this generates 'reducers'
Copy

• we can't use asynchronous func in readux easily
• only scynchronous actions can be run in redux reducer
• to use - use higherOrderFunc that contais dispatch

// asynchronous func
export const incrementAsync = (amount) => (dispatch) => { //higher order function
	setTimeout(()=>{
		dispatch(incrementByAmount(amount));
	}, 2000); //incrementByAmount() will be called using the 'dispatch' which is defaultly gvn by reduxToolkit for using async func
} // we will be calling this 'incrementAsync' in the 'App' component
Copy

// /store/reducer/counterSlice.jsx
import { createSlice } from '@reduxjs/toolkit'; // function or API from redux toolkit

const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions; // this generates 'action creators' for each case reducer function
// asynchronous func
export const incrementAsync = (amount) => (dispatch) => { //higher order function
	setTimeout(()=>{
		dispatch(incrementByAmount(amount));
	}, 2000); //incrementByAmount() will be called using the 'dispatch' which is defaultly gvn by reduxToolkit for using async func
} // we will be calling this 'incrementAsync' in the 'App' component

export default counterSlice.reducer; // this generates 'reducers'
Copy